<template>
  <div>
    <div style="margin: 30px 0">
      <a-input-search placeholder="请输入搜索内容" style="width: 200px;margin-right: 10px" enter-button @search="onSearch" />
      <a-button type="primary" @click="problemAdd" icon="plus">添加问题</a-button>
    </div>
    <a-modal v-if="problem" v-model="problem" :title="titles" @ok="handleOk">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="问题">
          <a-textarea
              v-decorator="['question', { rules: [{ required: true, message: '请填写问题~！' }] , initialValue:this.list.question}]"
              placeholder="请填写用户有可能问到的问题"
              :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="filterList"
        @change="handleChangeCurrent"
    >
      <!-- 操作自定义样式 -->
      <div slot="action" slot-scope="text,record">
        <a-button type="primary" style="margin-right: 10px" @click="edit(record)" icon="edit">编辑</a-button>
        <a-button type="danger" icon="delete" @click="del(record.id)">删除</a-button>
      </div>
    </a-table>
  </div>
</template>

<script>
import { provlemAdd, provlemBase, provlemDel, provlemEdit } from '@/services/photoList';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center'
  },
  {
    title: '问题',
    dataIndex: 'question',
    key: 'question',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    width: 210,
    scopedSlots: { customRender: 'action' }
  },
]
const data = []

export default {
  name: "ProblemBase",
  inject: ['reload'], //  刷新列表
  data() {
    return {
      data,
      columns,
      problem: false,   //  modal 的状态
      titles: '',       //  modal 标题
      form: this.$form.createForm(this),
      list: {},
      loading: false,
      filterList: {
        total: 0,
        pageNo: 1,
      }
    };
  },
  mounted() {
    this.provlemBase()
  },
  methods: {
    provlemBase() {
      const {pageNo} = this.filterList
      provlemBase({pageNo}).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 0
        this.loading = false;
      })
    },
    //  搜索
    onSearch(value) {
      provlemBase({question: value}).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 0
        this.loading = false;
      })
    },
    //  添加问题
    problemAdd() {
      this.titles = '添加问题'
      this.problem = true
    },
    //  编辑问题
    edit(e) {
      this.titles = '修改问题'
      this.problem = true
      this.list = e
    },
    //  删除问题
    del(e) {
      console.log(e)
      provlemDel({id:e}).then(res=>{
        this.$message.success(res.data.message)
        this.reload()
      })
    },
    handleOk(e) {
      e.preventDefault();
      if (this.titles === '添加问题'){
        this.form.validateFields((err, values) => {
          if (!err) {
            provlemAdd(values).then(res=>{
              this.$message.success(res.data.message)
              this.reload()
            })
          }
          this.problem = false
        });
      }
      if (this.titles === '修改问题'){
        const id = this.list.id
        this.form.validateFields((err, values) => {
          if (!err){
            provlemEdit({id:id,...values}).then(res=>{
              this.$message.success(res.data.message)
              this.reload()
            })
          }
          this.problem = false
        })
      }
    },
    //  分页
    handleChangeCurrent(val) {
      this.filterList.pageNo = val.current
      this.provlemBase()
    },
  }
}
</script>

<style scoped>

</style>
